<template>
  <div class="home">
    <van-tabs class="home_tab" v-model="tab_act" @change="tab_change">
      <van-tab name="Recommend" title="推荐"></van-tab>
      <van-tab name="Rank" title="排行"></van-tab>
      <van-tab name="Search" title="搜索"></van-tab>
    </van-tabs>
    <!-- 用于渲染二级路由内容 -->
    <keep-alive>
      <!-- <transition name="fade"> -->
      <router-view />
      <!-- </transition> -->
    </keep-alive>
  </div>
</template>

<script>
export default {
  created() {},
  data() {
    return {
      tab_act: "Recommend",
    };
  },
  methods: {
    tab_change(name) {
      if (name == this.$route.name) {
        return;
      }
      this.$router.push({
        name: name,
      });
    },
  },
  watch: {
    $route: {
      handler(val) {
        let path = ["Recommend", "Rank", "Search"];
        if (path.includes(val.name)) {
          // 修复导航闪动
          this.tab_act = val.name;
        }
      },
      immediate: true,
    },
  },
};
</script>

// dart-sass 用 ::v-deep 
<style lang="scss" scoped>
/* 进场时刻 和 离场完成时, 不透明度都为 0 ; */
.fade-enter,
.fade-leave-to {
  opacity: 0;
}
/* 为进场过程和离场过程设置 transition 过渡属性 */
.fade-enter-active,
.fade-leave-active {
  transition: all 0.5s linear;
}
// .van-tabs {
//   ::v-deep .van-tab {
//     background-color: skyblue;
//   }
// }
.home {
  padding-top: 44px;
  .home_tab {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 2;
  }
}
</style>